<template>
	<view class="container content-list">
		<custom-waterfalls-flow ref="waterfallsFlowRef" @wapperClick="wapperClick" @imageClick="imageClick"
			@loaded="loaded" :value="list" v-if="list">
			<view class="item" v-for="(item,index) in list" :key="index" slot="slot{{index}}">
				<image class="img" :src="item.cover" mode="widthFix"></image>
				<view class="title">{{item.title}}</view>
				<view class="desc">
					<view class="font">
						<image style="width: 40rpx;height: 40rpx;border-radius: 40rpx;" :src="item.user_avatar" mode="">
						</image>
						<span>{{item.nick_name}}</span>
					</view>
					<view class="views">
						<image style="width: 28rpx;height: 28rpx;" src="../../static/icon_show.png" mode="">
						</image>
						<span>{{item.browse}}</span>
					</view>
				</view>
			</view>
		</custom-waterfalls-flow>
		<u-loadmore :status="status" />
		<cu-empty tips="这里什么也没有~" v-if="list && list.length == 0"></cu-empty>
	</view>
	</view>
	</view>
</template>

<script>
	const iconShow = require('@/static/icon_show.png')
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		components: {

		},
		data() {
			return {
				iconShow,
				status: 'loadmore',
				scrollTop: 0,
				circle: {
					name: '豆豆'
				},
				list: null,
				barList: [{
						label: '关注',
						id: 0
					},
					{
						label: '综合',
						id: 1
					},
					{
						label: '圈子',
						id: 2
					},
					{
						label: '专题',
						id: 3
					},
				]
			}
		},
		computed: {
			...mapState(['userInfo']),
		},
		onShow() {

		},
		onLoad(opions) {
			this.type = opions.type
			if (this.type) {
				uni.setNavigationBarTitle({
					title: {
						publish: '我的发布',
						like: '我的点赞',
						colle: '我的收藏'
					} [opions.type]
				})
			}
			if (this.type == 'publish') {
				this.get_user_list_publish();
			} else if (this.type == 'like') {
				this.get_user_list_like();
			} else if (this.type == 'colle') {
				this.get_user_list_collec();
			}

		},
		destroyed() {

		},
		methods: {
			loaded() {
				console.log('加载完成')
			},
			wapperClick(item) {
				this.$Jump.Open('/pages/index/postDetail?id='+item.id)
				console.log('单项点击事件', item)
			},
			imageClick(item) {
				console.log('图片点击事件', item)
				this.$Jump.Open('/pages/index/postDetail?id='+item.id)
			},
			reset() {
				this.list = []
				this.$refs.waterfallsFlowRef.refresh();
			},
			get_user_list_collec() {
				this.status = 'loading';
				this.$Net.get(this.$api.user_list_collec, {
					page: 1,
					limit: 10
				}).then(res => {
					this.list = res.list.map(item => {
						item['image'] = item.cover;
					});
					console.log('this.list', this.list);
					this.status = 'nomore';
				})
			},
			get_user_list_like() {
				this.status = 'loading';
				this.$Net.get(this.$api.user_list_like, {
					page: 1,
					limit: 10
				}).then(res => {
					this.list = res.list;
					this.status = 'nomore';
				})
			},
			get_user_list_publish() {
				this.status = 'loading';
				this.$Net.get(this.$api.user_list_publish, {
					page: 1,
					limit: 10
				}).then(res => {
					this.list = res.list.map(item => {
						item['image'] =  item.cover
						return item;
					});
					console.log('this.list', this.list);
					this.status = 'nomore';
				})
			},
			loaded: function(e) {
				console.log(e)
			},
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e)
				this.scrollTop = e.detail.scrollTop
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {}

	.content-list {
		flex: 1;
		overflow: auto;
		// display: flex;
		// flex-wrap: wrap;
		::v-deep .img {
			border-radius: 28rpx !important;
			width: 100%;
			background-color: #ccc;
		}
	
		.item {
			width: 100%;
			padding-top: 18rpx;
			margin-bottom: 20rpx;
	
			.title {
				color: rgba(0, 0, 0, 0.80);
				font-family: "PingFang SC";
				font-size: 30rpx;
				font-weight: 400;
			}
	
			.desc {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 12rpx;
				width: 100%;
				color: rgba(0, 0, 0, 0.50);
				font-family: "PingFang SC";
				font-size: 26rpx;
	
				.font,
				.views {
					display: flex;
					align-items: center;
	
					span {
						margin-left: 12rpx;
					}
				}
			}
		}
	}
</style>